<template>
  <div class="mi-chat-section">
    <!--左边房间信息-->
    <div class="mi-room-info"></div>
    <!--中间聊天信息-->
    <div class="mi-room-msg">
      <div class="msg-box">

        <div class="msg-container milk-scroll" v-for="(v,i) in 20" :key="i">
          <div class="sender-image-box">
            <span class="sender-image">
            <img src="https://secure.gravatar.com/avatar/4b0f48b60194b8e5623af9c1f6e0f6fe" alt="">
            </span>
          </div>

          <div class="msg-info">

            <div class="send-info">
              <span class="sender-name">Test</span>
              <span class="send-time">昨天 22:03</span>
            </div>
            <div class="msg-detail">
              {{v}}
              <p>哈哈哈</p>
              <p>asdas呵呵呵呵呵</p>
              <p>asdasdasdasdsad</p>
            </div>
          </div>

        </div>
      </div>
      <div class="msg-in-area">
      </div>

    </div>
    <!--右侧在线信息-->
    <div class="mi-room-people"></div>
  </div>
</template>

<script>
export default {
  name: 'Chat',
  head(){
    return {
      title:'Chat-chat'
    }
  },
}
</script>

<style>
  .mi-chat-section {
    display: flex;
    width: 100%;
    height: 100%;
    color: white;
  }

  .mi-room-info {
    position: relative;
    width: 230px;
    height: 100%;
    background-color: #2e333a;
  }

  /*******************************************聊天室中部 START*/

  /*.msg-box::-webkit-scrollbar {display:none}*/
  .mi-room-msg {
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
    padding: 0 10px 0;
    background-color: #383c44;
  }

  .msg-box {
    width: 100%;
    flex-grow: 1;
    overflow: auto;
  }

  .msg-container {
    width: 100%;
    display: flex;
    padding: 24px 0;
    border-bottom: 1px solid #FFFFFF11;
  }

  .sender-image-box {
    width: 54px;
  }

  .sender-image {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
  }

  .sender-image img {
    width: 40px;
    height: 40px;
  }

  .msg-info {
    flex-grow: 1;
  }

  .sender-name {
    font-size: 14px;
  }

  .msg-detail {
    font-size: 14px;
    color: #d2d2d2;
  }

  .send-time {
    color: #ababab;
    font-size: 12px;
    padding-left: 7px;
  }

  .msg-in-area {
    min-height: 114px;
    width: 100%;
    border-top: 2px solid #ffffff12;
  }

  /*******************************************聊天室中部 END*/
  .mi-room-people {
    position: relative;
    width: 210px;
    height: 100%;
    background-color: #30343a;
  }
</style>
